<template>
    <div class="trend-line-chart">
        <!-- 视图切换按钮 -->
        <!-- <span class="unit">{{ yUnit }}</span>
        <div class="view-switch">
            <button v-for="item in viewOptions" :key="item.value" :class="{ active: currentView === item.value }"
                @click="switchView(item.value)">
                {{ item.label }}
            </button>
        </div> -->

        <!-- ECharts 图表容器 -->
        <div ref="chartRef" class="chart-container"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'TrendLineChart',
    props: {
        dataSource: {
            type: Object,
            required: true,
            default: () => ({
                day: {
                    xAxis: ['09-28', '09-29', '09-30', '10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10', '10-11', '10-12', '10-13', '10-14'],
                    yAxis: [20000, 60000, 70000, 40000, 30000, 50000, 60000, 40000, 28000, 35000, 40000, 28000, 28000, 35000, 50000, 45000, 28000]
                },
                week: {
                    xAxis: ['第1周', '第2周', '第3周', '第4周'],
                    yAxis: [150000, 120000, 180000, 160000]
                },
                month: {
                    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    yAxis: [350000, 420000, 380000, 450000, 410000, 480000]
                }
            })
        },

        yUnit: {
            type: String,
            default: '单位：次'
        }
    },
    data() {
        return {
            chartInstance: null,
            currentView: 'day',
            viewOptions: [
                { label: '按天', value: 'day' },
                { label: '按周', value: 'week' },
                { label: '按月', value: 'month' }
            ]
        };
    },
    mounted() {
        this.initChart();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
        }
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        // 初始化图表
        initChart() {
            const chartDom = this.$refs.chartRef;
            if (!chartDom) return;

            this.chartInstance = echarts.init(chartDom);
            this.updateChart();
        },

        // 更新图表数据和配置
        updateChart() {
            const { xAxis, yAxis } = this.dataSource[this.currentView];
            // const { yUnit } = this;

            // 面积渐变配置（紫色系）
            const areaColor = new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    { offset: 0, color: 'rgba(135, 150, 255, 0.8)' },
                    { offset: 1, color: 'rgba(240, 242, 255, 0.2)' }
                ],
                false
            );

            const option = {
                backgroundColor: '#fff',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                // 调整grid底部间距，避免dataZoom滑块遮挡
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%', // 原3%改为10%，给滑块足够空间
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis,
                    axisLine: {
                        lineStyle: {
                            color: '#D9D9D9'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    // name: yUnit,
                    nameTextStyle: {
                        color: '#666',
                        fontSize: 12
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#E9E9E9'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        symbol: 'none', // 隐藏数据点
                        lineStyle: {
                            color: 'rgb(90, 105, 255)',
                            width: 2
                        },
                        areaStyle: {
                            color: areaColor
                        },
                        data: yAxis
                    }
                ],
                // 优化后的dataZoom：支持inside+slider双交互，适配主题色
                // dataZoom: [
                //     // 1. 鼠标滚轮缩放 + 拖拽平移
                //     {
                //         type: 'inside',
                //         start: 0,
                //         end: 100,
                //         enableMouseWheel: true, // 启用鼠标滚轮缩放
                //         enableDrag: true, // 启用拖拽平移
                //         filterMode: 'filter' // 数据过滤模式，确保缩放正确
                //     },
                //     // 2. 底部滑块缩放
                //     {
                //         type: 'slider',
                //         bottom: 20,
                //         start: 0,
                //         end: 100,
                //         handleStyle: {
                //             color: '#fff',
                //             borderColor: '#8B5CFF' // 改为组件主题色，与活跃按钮一致
                //         },
                //         trackStyle: {
                //             backgroundColor: '#f0f2f5'
                //         },
                //         filterMode: 'filter'
                //     }
                // ]
            };

            this.chartInstance.setOption(option);
        },

        // 切换视图（天/周/月）- 新增dataZoom重置
        switchView(view) {
            this.currentView = view;
            this.updateChart();
            // 重置dataZoom范围为0-100%，避免数据量少（如周/月）时仅显示部分数据
            this.chartInstance.setOption({
                dataZoom: [
                    { start: 0, end: 100 },
                    { start: 0, end: 100 }
                ]
            });
        },

        // 窗口 resize 时自适应
        handleResize() {
            if (this.chartInstance) {
                this.chartInstance.resize();
            }
        }
    }
};
</script>

<style scoped>
.unit {
  position: absolute;
  top: 5px;
  z-index: 10;
  font-weight: 400;
  font-size: 18px;
  color: #999999;
  margin-left: 5px;
}
.trend-line-chart {
    width: 100%;
    height: 460px;
    position: relative;
}

.view-switch {
    position: absolute;
    top: 0px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.view-switch button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.view-switch button.active {
    color: #327DFF;
    background: #F4F8FF;
    border-radius: 4px;
    border: 1px solid #327DFF;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>